<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue'
const LongRentOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/operators/tabpane/LongRentOrderTabPane.vue')
)
const TimeRentOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/operators/tabpane/TimeRentOrderTabPane.vue')
)
const BatteryOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/operators/tabpane/BatteryOrderTabPane.vue')
)
const BikeModifieldsOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/operators/tabpane/BikeModifieldsOrderTabPane.vue')
)
const BatterySwapOrderTabPane = defineAsyncComponent(
  () => import('@/views/personnel/operators/tabpane/BatterySwapOrderTabPane.vue')
)
const LongRentOrderTabPaneRef = ref<InstanceType<typeof LongRentOrderTabPane> | null>(null)
const TimeRentOrderTabPaneRef = ref<InstanceType<typeof TimeRentOrderTabPane> | null>(null)
const BatteryOrderTabPaneRef = ref<InstanceType<typeof BatteryOrderTabPane> | null>(null)
const BikeModifieldsOrderTabPaneRef = ref<InstanceType<typeof BikeModifieldsOrderTabPane> | null>(
  null
)
const BatterySwapOrderTabPaneRef = ref<InstanceType<typeof BatterySwapOrderTabPane> | null>(null)
/** 租赁订单标签激活name */
const rentOrderActiveName = ref<string>('bikeLongTerm')

const handleTabChange = () => {
  switch (rentOrderActiveName.value) {
    case 'bikeLongTerm':
      LongRentOrderTabPaneRef.value?.handleFormSearch()
      break
    case 'bikeShortTerm':
      TimeRentOrderTabPaneRef.value?.handleFormSearch()
      break
    case 'battery':
      BatteryOrderTabPaneRef.value?.handleFormSearch()
      break
    case 'bikeModified':
      BikeModifieldsOrderTabPaneRef.value?.handleFormSearch()
      break
    case 'batterySwap':
      BatterySwapOrderTabPaneRef.value?.handleFormSearch()
      break
    default:
      break
  }
}
const setTabId = (id: string) => {
  LongRentOrderTabPaneRef.value?.setId(id)
  TimeRentOrderTabPaneRef.value?.setId(id)
  BatteryOrderTabPaneRef.value?.setId(id)
  BikeModifieldsOrderTabPaneRef.value?.setId(id)
  BatterySwapOrderTabPaneRef.value?.setId(id)
}
defineExpose({
  handleTabChange,
  setTabId
})
</script>

<template>
  <el-tabs v-model="rentOrderActiveName" type="border-card" @tab-change="handleTabChange">
    <el-tab-pane name="bikeLongTerm" label="长租订单">
      <long-rent-order-tab-pane ref="LongRentOrderTabPaneRef" />
    </el-tab-pane>
    <el-tab-pane name="bikeShortTerm" label="短租订单">
      <time-rent-order-tab-pane ref="TimeRentOrderTabPaneRef" />
    </el-tab-pane>
    <el-tab-pane name="battery" label="换电订单">
      <battery-order-tab-pane ref="BatteryOrderTabPaneRef" />
    </el-tab-pane>
    <el-tab-pane name="bikeModified" label="中控线材电池订单">
      <bike-modifields-order-tab-pane ref="bikeModifiedTabPaneRef" />
    </el-tab-pane>
    <el-tab-pane name="batterySwap" label="单次换电">
      <battery-swap-order-tab-pane ref="BatterySwapTabPaneRef" />
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped></style>
